<template>
    <div class="hello">
        <div class="top">
            <Card class="card">
                <div class="head">
                    <div class="title-head">
                        <div class="title" :class="{'editing': isEditing}" @dblclick="changeTitle" slot="title">{{blog.title}}
                            <Divider type="vertical"/></div>
                        <div class="title" :class="{'editing': !isEditing}" slot="title">
                            <input class="title-input" ref="test" v-model="titleInput" @keyup.enter="setTitle" @blur="setTitle" />
                            <Divider type="vertical" />
                        </div>
                    </div>
                    <div class="title-head">
                        <Button type="dashed" class="preview" @click="preview = true">发布</Button>
                        <Button type="dashed" class="preview" @click="preview = true">预览</Button>
                        <Modal v-model="preview" width="360">
                            <p slot="header" style="color:#f60;text-align:center">
                                <Icon type="ios-information-circle"></Icon>
                                <span>预览小标签</span>
                            </p>
                            <div style="text-align:center">
                                <blog-preview :title=blog.title :url=blog.url :watched="10" :storage="20" :topic="'平板'"
                                              :tags="blog.tags" :author="'zzy'" :content="20" :price="this.price"></blog-preview>
                            </div>
                            <div slot="footer">
                                <Button type="error" size="large" long  @click="delPreview">Delete</Button>
                            </div>
                        </Modal>
                        <div class="uploadPic" slot="title">
                            <Upload multiple type="drag" action="">
                                <div>
                                    <Icon type="ios-cloud-upload" size="23" style="color: #3399ff"></Icon>
                                </div>
                            </Upload>
                        </div>
                        <Input placeholder="价格" style="width: 150px;float: right;margin-right: 15px;color: #ff6600"
                        v-model="price"/>
                    </div>
                </div>
                <div class="tag" >
                    <tags :tags="blog.tag" :type="'close'"></tags>
                    <input class="inputag" v-model="inputag" @keyup.enter="addTag" placeholder="enter tag here"/>
                </div>
            </Card>
        </div>
        <mavon-editor class="editor" v-model="blog.content" ref="md"
                      @change="changeContent"  @imgAdd="$imgAdd" @imgDel="$imgDel"/>
    </div>

</template>

<script>
    import tags from "@/component/tags";
    import blogPreview from "@/component/blogPreview";
    export default {
        components:{
          tags,
           'blog-preview': blogPreview
        },
        name: "edit",
        data(){
            return{
                titleInput:'',
                isEditing:false,
                price:'',
                blog:{
                    title:'请输入标题',
                    tag:[],
                    content:'',
                    html:'',
                    url:require('../../assets/test.png'),
                },
                inputag:'',
                preview:false,
            }
        },
        methods: {
            changeTitle(){
                this.isEditing=true;
                this.titleInput = this.blog.title;
                setTimeout(()=>{
                    this.$refs.test.focus()
                },100)
            },
            setTitle(){
                this.isEditing = false;
                this.blog.title = this.titleInput;
            },
            addTag(){
                let _this = this;
                let s = _this.inputag
                if(s.length > 10||s.length <1){
                    _this.$Message.info('tag 格式不对')
                    return
                }
                else if(_this.blog.tag.includes(s)){
                    _this.$Message.info("tag repeated")
                    return;
                }
                if(_this.blog.tag.length>8){
                    _this.$Message.info("too many tag")
                    return;
                }
                _this.blog.tag.push(this.inputag);
                this.inputag = ''
            },
            changeContent(value,render){
                this.blog.html = render;
                window.console.log(this.blog.html)
            },
            delPreview(){
              this.preview = false;
            },
        },

    }
</script>

<style scoped>
    .hello{
        width: 86%;
        position: relative;
        left: 7%;
        height: 100%;
    }
    .editing{
        display: none;
    }
    .top{
        margin-bottom: 5px;
    }
    .card{
        width: 100%;
    }
    .head{
        display: flex;
        -webkit-font-smoothing: antialiased;
    }
    .title-head{
        width: auto;
        -webkit-box-flex: 1;
        -ms-flex: 1 1;
        flex: 1 1;
    }
    .title{
        font-size: 23px;
        font-weight: 500;
        cursor: pointer;
    }
    .title-input{
        border: none;
        font-size: 23px;
        color: cadetblue;
        font-weight: 400;
    }
    .title-input:focus{
        outline: none;
    }
    .preview{
        width: 100px;
        height: 27px;
        float: right;
        margin-right: 10px;
    }
    .uploadPic{
        width: 100px;
        height: 23px;
        float: right;
    }
    .card >>> .ivu-card-head{
        padding-top: 16px;
        padding-bottom: 5px;
    }
    .top >>> .ivu-card-body{
        padding: 5px;
    }
    .inputag{
        border: none;
        outline: none;
        width: 100%;
    }
    .editor{
        z-index: 10;
        height: 80%;
    }

</style>